﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link type="text/css" media="all" rel="stylesheet" href="qp.css" />
    <script type="text/javascript" src="qp.min.js"></script>
    <style>
        .qp-statement-header {
            color: {textColor};
        }
    </style>
</head>
<body style="background-color: {backColor}">
    <div id="container">

    </div>
    <script>
        drawPlan();

        window.addEventListener("resize", function (e) {
            clearTimeout(window.resizedFinished);
            window.resizedFinished = setTimeout(function () {
                drawPlan();
            }, 200);
        });

        function drawPlan() {
            QP.showPlan(document.getElementById("container"), '{plan}');
        }
    </script>
</body>
</html>